<template>
  <div class="index">
    <Top>
    </Top>
    <Center>
    </Center>
    <Footer>
    </Footer>
  </div>
</template>

<script>
import Top from './Top/index.vue' // 上
import Center from './Center/index.vue' // 中
import Footer from './Footer/index.vue' // 下
export default {
    components:{
        Top,
        Center,
        Footer
    }
}
</script>

<style lang="scss" scoped>
.index{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &>div{
        flex: 1;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 5px;
        background: url('@/assets/shanGe.png');
        background-position: center center;
        background-size: 100% 100%;
        position: relative;
        // 使用伪元素做边框
        &::before{
          content: '';
          width: 15px;
          height: 15px;
          border-top: 1px solid #02a6b5;
          border-left: 1px solid #02a6b5;
          position: absolute;
          top: 0;
          left: 0;
        }
        &::after{
          content: '';
          width: 15px;
          height: 15px;
          border-top: 1px solid #02a6b5;
          border-right: 1px solid #02a6b5;
          position: absolute;
          top: 0;
          right: 0;
        }
        
    }
}
</style>